<template>
  <div class="wrapper" ref="wrapper" :style="{maxHeight:heights}">
    <!-- 这里插槽外层需要再包裹一层 scroll规定 wrapper内只能有一个标签 更多内容写在content 里面 -->

    <!-- 这里预留的插槽 是为其他地方使用时传入的内容(需要滚动的内容) -->
    <slot></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Scroll",
  props: {
    probeType: {
      type: Number,
      // 给传入的 probeType 设置默认值0  不监听滚动
      default: 0,
    },
    // 上拉加载
    pullUpLoad: {
      type: Boolean,
      default: false,
    }, 
    // 高度
    maxHeight: {
      type: Number,
      default: 50 + "vh",
    },
    // 下拉刷新
    pullDownRefres: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scroll: null, 
    };
  },
  // 动态计算高度
  computed:{
    heights:function(){
      return this.maxHeight + 'vh'
    }
  },
  // 页面实例挂载完成后的钩子函数 此处创建 scroll 实例
  mounted() { 
    // 此处推荐使用 ref获取元素信息 (不会和其他元素重复)
    // 第一步 创建 BScroll 对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 设置类似div的元素 是否可以被点击 BetterScroll 默认会阻止浏览器的原生 click 事件
      click: true,
      // 开启 probeType 配置 需要根据使用者传来的数据为准 (有些时候调用不需要监听滚动)
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad,
      pullDownRefresh: this.pullDownRefresh,
      // bounce: false
    });
    // 监听滚动的位置
    this.scroll.on("scroll", (position) => {
      this.$emit("scroll", position);
    }); 
    // 鼠标/手指移开触发
    this.scroll.on('touchEnd',({y}) => {
      this.$emit('touchEnd',y)
    }) 
  },
  methods: {
    // ES6 语法 设置 time默认值 直接等号赋值即可
    scrollTo(x, y, time = 500) {
      // 逻辑与 前面为false 后面不执行 (判断scroll是否有值)
      this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time);
    }, 
    // 封装finishPullUp() 方法 结束上一次的加载事件
    finishPullUp() {
      this.scroll.finishPullUp();
    }, 
    // scroll refresh()方法
    refresh() {
      this.scroll && this.scroll.refresh();
    }, 
  }, 
};
</script>

<style lang="less" scoped>
.wrapper {
  overflow: hidden; 
}
</style>
